<script lang="ts" setup="">
import { computed, ref } from 'vue'
import useMainStore from '@/store'

const store = useMainStore()

const messageList = computed(() => store.message)
let activeKey = ref<string>('unread')

function handle_changeUnreadToRead(index: number) {
    let message = messageList.value.unreadList.splice(index, 1)
    messageList.value.readList = message.concat(messageList.value.readList)
}

function handle_messageAllRead() {
    messageList.value.readList = messageList.value.unreadList.concat(
        messageList.value.readList
    )
    messageList.value.unreadList.length = 0
}

function handle_putMessageInRecycle(index: number) {
    let message = messageList.value.readList.splice(index, 1)
    messageList.value.recycleList = message.concat(
        messageList.value.recycleList
    )
}

function handle_messageAllClear() {
    messageList.value.recycleList = messageList.value.readList.concat(
        messageList.value.recycleList
    )
    messageList.value.readList.length = 0
}

function handle_deleteMessage(index: number) {
    messageList.value.recycleList.splice(index, 1)
}

function handle_messageAllDelete() {
    messageList.value.recycleList.length = 0
}
</script>

<template>
    <div class="tabs-bar">
        <a-tabs
            v-model:activeKey="activeKey"
            animated
        >
            <a-tab-pane
                key="unread"
                tab="未读信息"
            >
                <a-list
                    item-layout="horizontal"
                    :data-source="messageList.unreadList"
                >
                    <template #renderItem="{ item, index }">
                        <a-list-item>
                            <a-list-item-meta :description="item.description">
                                <template #title>
                                    <a href="javascript:">{{ item.title }}</a>
                                </template>
                                <template #avatar>
                                    <a-avatar
                                        src="/src/static/homeIcon/rng.jpg"
                                    />
                                </template>
                            </a-list-item-meta>
                            <a-button
                                class="mr-15"
                                type="primary"
                                shape="round"
                                @click="handle_changeUnreadToRead(index)"
                                >标为已读
                            </a-button>
                        </a-list-item>
                    </template>
                </a-list>
                <a-button
                    v-if="messageList.unreadList.length"
                    class="mt-5"
                    type="primary"
                    shape="round"
                    @click="handle_messageAllRead"
                >
                    全部已读
                </a-button>
            </a-tab-pane>
            <a-tab-pane
                key="read"
                tab="已读信息"
                force-render
            >
                <a-list
                    item-layout="horizontal"
                    :data-source="messageList.readList"
                >
                    <template #renderItem="{ item, index }">
                        <a-list-item>
                            <a-list-item-meta :description="item.description">
                                <template #title>
                                    <a href="javascript:">{{ item.title }}</a>
                                </template>
                                <template #avatar>
                                    <a-avatar
                                        src="/src/static/homeIcon/rng.jpg"
                                    />
                                </template>
                            </a-list-item-meta>
                            <a-button
                                class="mr-15"
                                type="primary"
                                shape="round"
                                danger
                                @click="handle_putMessageInRecycle(index)"
                                >清除
                            </a-button>
                        </a-list-item>
                    </template>
                </a-list>
                <a-button
                    v-if="messageList.readList.length"
                    class="mt-5"
                    type="primary"
                    shape="round"
                    danger
                    @click="handle_messageAllClear"
                >
                    全部放入回收站
                </a-button>
            </a-tab-pane>
            <a-tab-pane
                key="recycle"
                tab="回收站"
                force-render
            >
                <a-list
                    item-layout="horizontal"
                    :data-source="messageList.recycleList"
                >
                    <template #renderItem="{ item, index }">
                        <a-list-item>
                            <a-list-item-meta :description="item.description">
                                <template #title>
                                    <a href="javascript:">{{ item.title }}</a>
                                </template>
                                <template #avatar>
                                    <a-avatar
                                        src="/src/static/homeIcon/rng.jpg"
                                    />
                                </template>
                            </a-list-item-meta>
                            <a-button
                                class="mr-15"
                                type="primary"
                                shape="round"
                                danger
                                @click="handle_deleteMessage(index)"
                                >删除
                            </a-button>
                        </a-list-item>
                    </template>
                </a-list>
                <a-button
                    v-if="messageList.recycleList.length"
                    class="mt-5"
                    type="primary"
                    shape="round"
                    danger
                    @click="handle_messageAllDelete"
                >
                    全部删除
                </a-button>
            </a-tab-pane>
        </a-tabs>
    </div>
</template>

<style lang="scss" scoped>
.tabs-bar {
    :deep(.ant-list-item) {
        &:last-of-type {
            border-bottom: 1px solid #f0f0f0;
        }
    }

    //	:deep(.ant-tabs-nav-wrap) {
    //		flex: 1;
    //	}
    //
    //	:deep(.ant-tabs-nav-list) {
    //		flex: 1;
    //	}
    //
    //	:deep(.ant-tabs-tab) {
    //		flex: 1;
    //		justify-content: center;
    //	}
}
</style>
